<template>
  <div class="box">
    <!-- 搜索重置 -->
    <div class="search">
      <div class="search_input">
        <p>
          <span>名称：</span>
          <input type="text" placeholder="请输入页面名称" />
        </p>
        <p>
          <span>内容：</span>
          <input type="text" placeholder="请输入页面内容" />
        </p>
        <p>
          <span>状态：</span>
          <a-select
            v-model:value="value"
            show-search
            style="width: 200px"
            :options="options"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
          ></a-select>
        </p>
      </div>

      <div class="search_btn">
        <a-button type="primary">搜索</a-button>
        <a-button>重置</a-button>
      </div>
    </div>

    <!-- 分页内容 -->
    <div class="count">
      <!-- 新建  -->
      <div class="count_add">
        <!-- 遮罩层 -->
        <van-overlay :show="show">
          <div class="wrapper">
            <div class="block">
              <div style="display: flex; justify-content: space-between">
                <b></b>
                <b
                  @click="show = false"
                  style="font-size: 26px; margin: 10px 20px"
                  >x</b
                >
              </div>
              <div style="ipt">
                <p>
                  <span>id</span>
                  <input
                    type="text"
                    :value="id"
                    disabled="false"
                    style="color: #ccc"
                  />
                </p>
                <p>
                  <span>页面</span>
                  <input type="text" placeholder="请输入页面名称" />
                </p>
                <p>
                  <span>内容</span>
                  <input type="text" placeholder="请输入内容" />
                </p>
              </div>
              <van-button
                type="primary"
                style="float: right; margin: 0 20px"
                @click="add_confirm"
                >确定</van-button
              >
            </div>
          </div>
        </van-overlay>
        <b></b>
        <van-button type="primary" text="添加" @click="show = true" />
      </div>

      <!--表格 -->
      <div class="table">
        <div style="margin-bottom: 16px">
          <span style="margin-left: 8px">
            <template v-if="hasSelected">{{
              `选中：${selectedRowKeys.length}个 `
            }}</template>
          </span>
          <span style="margin-left: 8px">
            <template v-if="hasSelected">
              <a-button type="primary" danger @click="click_delte"
                >删除</a-button
              >
            </template>
          </span>
        </div>
        <a-table
          bordered="true"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :columns="columns"
          :data-source="states.list"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, computed, reactive, toRefs } from 'vue'
import axios from 'axios'

// 表格的数据
const columns = [
  {
    title: '页面名',
    dataIndex: 'name'
  },
  {
    title: '路径',
    dataIndex: 'path'
  },
  {
    title: '顺序',
    dataIndex: 'order'
  },
  {
    title: '阅读量',
    dataIndex: 'views'
  },
  {
    title: '发布时间',
    dataIndex: 'publishAt'
  },
  {
    title: '发布时间',
    dataIndex: 'status'
  }
]

export default defineComponent({
  name: 'pageVivs',
  setup() {
    let states = reactive({
      list: [],
      data: []
    })

    // 下拉框
    const options = ref([
      {
        value: '已发布',
        label: '已发布'
      },
      {
        value: '草稿',
        label: '草稿'
      }
    ])

    //  请求数据
    const getList = () => {
      axios.get('https://creationapi.shbwyz.com/api/page').then((res) => {
        let newlist = res.data.data[0].map((item) => {
          return { ...item, key: item.id }
        })
        console.log(newlist)
        states.list = newlist
        // console.log(res.data.data[0])
      })
    }
    //初始化调用
    getList()
    //监听事件
    const handleChange = (value) => {
      console.log(`selected ${value}`)
    }

    const handleBlur = () => {
      console.log('blur')
    }
    const handleFocus = () => {
      console.log('focus')
    }
    const filterOption = (input, option) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }

    // 表格
    const state = reactive({
      selectedRowKeys: [],
      // Check here to configure the default column
      loading: false
    })
    const hasSelected = computed(() => state.selectedRowKeys.length > 0)
    const start = () => {
      state.loading = true
      // ajax request after empty completing
      setTimeout(() => {
        state.loading = false
        state.selectedRowKeys = []
      }, 1000)
    }
    const onSelectChange = (selectedRowKeys) => {
      console.log('selectedRowKeys changed666', selectedRowKeys)
      state.selectedRowKeys = selectedRowKeys
      states.data = selectedRowKeys
    }

    //选中点击删除
    const click_delte = () => {
      axios
        .delete(`https://creationapi.shbwyz.com/api/page/{${states.data[0]}}`)
        .then((res) => {
          console.log(res)
        })
        .catch((error) => {
          console.log(error)
        })
    }

    // 遮罩层
    const show = ref(false)
    // 随机生成两位数的id
    var id = Math.floor(Math.random() * 90) + 18

    const add_confirm = () => {
      show.value = false
      console.log(ref)
    }

    return {
      value: ref(undefined),
      filterOption,
      handleBlur,
      handleFocus,
      handleChange,
      options,
      show,
      id,
      columns,
      hasSelected,
      click_delte,
      ...toRefs(state),
      add_confirm,
      start,
      onSelectChange,
      states
    }
  }
})
</script>
<style>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(238, 238, 238);
  justify-content: space-between;
}

/* 搜索框 */
.search {
  width: 100%;
  height: 90px;
  background: rgb(228, 244, 250);
  display: flex;
  justify-content: space-between;
}
.search_input {
  display: flex;
}
.search_input p {
  width: 400px;
  margin: 20px 30px;
}
.search_input p input {
  width: 300px;
  height: 36px;
  border: 1px solid #ccc;
  text-indent: 20px;
  outline: 0;
}

.search_btn {
  margin: 20px 0;
}

.count {
  width: 100%;
  height: 660px;
  background: #fff;
}

.count_add {
  display: flex;
  justify-content: space-between;
  height: 50px;
  margin-top: 10px;
}
.table {
  margin-top: -50px;
}

.wrapper {
  position: relative;
  height: 100%;
}

/* 遮罩层 */
.block {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 520px;
  height: 450px;
  background-color: #fff;
  z-index: 99;
  border-radius: 10px;
}
.block .ipt {
  margin: 20px 0;
}
.block p {
  width: 100%;
  height: 60px;
  display: flex;
  margin: 30px;
  font-size: 16px;
}
.block p input {
  outline: 0;
  border: 1px solid #ccc;
  width: 330px;
  height: 40px;
  margin: 0 20px;
  text-indent: 20px;
  font-size: 15px;
}
.block p span {
  display: inline-block;
  margin: 10px 0;
  width: 52px;
  text-align: right;
}
</style>
